<template>
	<view class="page">
		<view class="title">{{ form.examName }}</view>
		<view>
			<u-col span="12">
				<u-empty v-if="questions.length == 0" mode="list"></u-empty>

				<u-collapse>
					<u-collapse-item v-for="(item, index) in questions"
						:disabled="item.answerValue == null || item.answerValue == ''"
						:isLink="!(item.answerValue == null || item.answerValue == '')">
						<view slot="title" class="u-slot-title">
							<u-tag v-if="item.type == '填空'" text="填空题" plain size="mini" type="success">
							</u-tag>
							<u-tag v-else-if="item.type == '单选'" text="单选题" plain size="mini" type="warning">
							</u-tag>
							<u-tag v-else-if="item.type == '多选'" text="多选题" plain size="mini">
							</u-tag>
							<text class="u-cell-text">{{ item.questionName }}</text>
						</view>
						<view v-if="item.answerValue == null || item.answerValue == ''" slot="value"
							class="u-slot-value">
							<u-tag text="未作答" plain size="mini" type="error"></u-tag>
						</view>
						<view v-else slot="value" class="u-slot-value">
							<text>{{ item.answerValue }}</text>
						</view>

						<view v-if="item.type == '填空'">
							<u--textarea v-model="item.answerValue" placeholder="请输入答案" :height="150" count
								disabled></u--textarea>
						</view>
						<view v-else-if="item.type == '单选'">
							<u-radio-group size="20" iconSize="20" v-model="item.answerValue" placement="column"
								disabled>
								<u-radio labelSize="20" :customStyle="{ marginBottom: '25rpx' }"
									v-for="(childrenItem, index) in item.children" :key="index"
									:label="childrenItem.questionName" :name="childrenItem.questionName"
									@change="radioChange">
								</u-radio>
							</u-radio-group>
						</view>
						<view v-else-if="item.type == '多选'">
							<u-checkbox-group v-model="item.answerValue" placement="column" disabled>
								<u-checkbox size="20" labelSize="20" iconSize="20"
									:customStyle="{ marginBottom: '25rpx' }"
									v-for="(childrenItem, index) in item.children" :key="index"
									:label="childrenItem.questionName" :name="childrenItem.questionName">
								</u-checkbox>
							</u-checkbox-group>
						</view>
					</u-collapse-item>
				</u-collapse>
			</u-col>
		</view>
		<view class="submit-button">
			<u-button @click="handle_Answer_click">开始答题</u-button>
		</view>
	</view>
</template>

<script>
	import {
		listAssignDetail,
		getAssignDetail,
		delAssignDetail,
		addAssignDetail,
		updateAssignDetail,
	} from "@/api/elder/questionnaire/assignDetail";

	import {
		listAnswer,
		getAnswer,
		delAnswer,
		addAnswer,
		updateAnswer,
	} from "@/api/elder/questionnaire/answer";

	import {
		listQuestion
	} from "@/api/elder/questionnaire/question";

	import {
		transformPostBody,
		transformRequestURL,
	} from "@/api/queryParam/index.js";

	//考卷预览页
	export default {
		data() {
			return {
				assignId: null,
				assignDetailId: null,
				paperId: null,
				form: {
					examName: "问卷名称",
					respondent: "",
					answers: [],
				},
				queryParams: {
					pageNum: 1,
					pageSize: 1000,
					paperId: null,
				},
				// 表单查询参数
				queryParamsForm: {},
				currentIndex: 0,
				questions: [],
				answerList: null,
			};
		},
		onLoad: function(options) {
			console.log("options", options);
			this.assignId = options.assignId;
			this.assignDetailId = options.assignDetailId;
		},
		onShow() {
			this.getList();
		},
		methods: {
			async getList() {
				this.loading = true;
				//获取题目，先通过assignDetailId获取paperId
				await getAssignDetail(this.assignDetailId).then((response) => {
					// console.log("getAssignDetail", response);
					this.paperId = response.data.paperId;

					this.queryParams.paperId = this.paperId; //获取试卷题目
					this.queryParams.assignDetailId = this.assignDetailId; //获取之前做题答案
				});
				await listAnswer(transformRequestURL(this.queryParams)).then(
					(response_ans) => {
						console.log("listAnswer", response_ans);
						this.answerList = response_ans.rows;
					}
				);
				await listQuestion(transformRequestURL(this.queryParams)).then(
					(response_ques) => {
						// console.log("listQuestion", response_ques);
						let rootNodes = [];
						response_ques.data.forEach((item) => {
							if (item.parentQuestionid == 0) {
								rootNodes.push(item);
								//通过this.answerList中的数据，将答案赋值给题目的answerValue
								this.answerList.forEach((item2) => {
									if (item.questionId == item2.questionId) {
										item.answerValue = item2.answerValue;
									}
								});
							}
						});
						rootNodes.forEach((item) => {
							item.children = [];
							response_ques.data.forEach((item2) => {
								if (item2.parentQuestionid == item.questionId) {
									item.children.push(item2);
								}
							});
						});
						// console.log("rootNodes", rootNodes);
						this.questions = this.formartQuestions(rootNodes);
						this.loading = false;
						// console.log("questions", this.questions);
					}
				);
			},
			//将树形结构转化为要求的结构
			formartQuestions(rootNodes) {
				let result = [];
				//树状遍历rootNodes，按一下规则进行转化
				//所有节点添加属性type，满足转化关系，函数：formartquestionType(questionType)
				//在根节点添加属性answerValue，用于存放答案

				//遍历节点，只有两层
				rootNodes.forEach((item) => {
					let question = {};
					question.questionId = item.questionId;
					question.questionName = item.questionName;
					question.questionType = item.questionType;
					question.type = this.formartquestionType(item.questionType);
					question.answerValue = item.answerValue;
					question.children = [];
					item.children.forEach((item2) => {
						let question2 = {};
						question2.questionId = item2.questionId;
						question2.questionName = item2.questionName;
						question2.questionType = item2.questionType;
						question2.type = this.formartquestionType(item2.questionType);
						// question2.answerValue =  item.answerValue
						question2.children = [];
						question.children.push(question2);
					});
					result.push(question);
				});
				return result;
			},
			//转化questionType
			formartquestionType(questionType) {
				switch (questionType) {
					case "1":
						return "填空";
					case "2":
						return "单选";
					case "3":
						return "多选";
					case "0":
						return "主标题";
					case "21":
						return "只需选择";
					case "22":
						return "选择带填空";
					default:
						return "";
				}
			},

			handleInput(item) {
				return false;
			},
			radioChange(item) {},
			checkboxChange(item) {},
			prevQuestion() {
				if (this.currentIndex > 0) {
					this.currentIndex--;
				}
			},
			nextQuestion() {
				if (this.currentIndex < this.questions.length - 1) {
					this.currentIndex++;
				}
			},
			swiperChange({
				detail: {
					current
				}
			}) {
				this.currentIndex = current;
			},
			submitForm() {
				this.errors = [];
				// 表单校验
				for (let i = 0; i < this.questions.length; i++) {
					const field = `answers.${i}`;
					this.$refs.form.validateField(field, (error) => {
						this.errors[i] = error ? error[0].message : "";
					});
				}
				// 判断是否所有题目都回答完整
				const isComplete = this.errors.every((error) => !error);
				if (isComplete) {
					console.log(this.form);
				} else {
					uni.showToast({
						title: "请填写完整问卷",
						icon: "none",
					});
				}
			},
			checkboxChange(n) {
				console.log("change", n);
			},
			groupChange(n) {
				console.log("groupChange", n);
			},
			radioChange(n) {
				console.log("radioChange", n);
			},
			handel_cell_click() {},
			handle_Answer_click() {
				//跳转页面，将考卷ID，答案
				this.$tab.navigateTo(
					'/pages/WenJuanDiaoCha/Answer/edit?assignId=' + this.assignId + '&assignDetailId=' + this
					.assignDetailId + '&paperId=' + this.paperId)
			}
		},
	};
</script>

<style scoped>
	::v-deep .u-cell__body {
		background-color: white;
	}

	.u-slot-title {
		display: flex;
		align-items: center;
	}

	.u-cell-text {
		margin: 6rpx;
		max-width: 90%;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.u-slot-value {
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 使用省略号表示溢出内容 */
	}

	.page {
		height: 100%;
	}

	.title {
		border: 1px solid;
		text-align: center;
		font-size: 45rpx;
		margin: 20rpx;
		font-weight: 600;

		/* position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999; */
	}

	.form {
		height: 1200rpx;
		overflow: hidden;
	}

	.swiper {
		height: 100%;
	}

	.swiper-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.question {
		height: 80%;
		/* margin-bottom: 20rpx; */
		/* text-align: center; */
	}

	.question-title {
		font-size: 60rpx;
		text-align: left;
		margin-bottom: 40rpx;
		font-weight: 600;
	}

	.controls {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		/* bottom: 20rpx; */
	}

	.prev-button,
	.next-button {
		width: 220rpx;
		height: 60rpx;
		/* line-height: 40rpx; */
		text-align: center;
		background-color: #ccc;
		border-radius: 4rpx;
		color: #fff;
		cursor: pointer;
		font-size: 35rpx;
	}

	.submit-button {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;

		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		/* 保证在最上层 */
	}
</style>